import TablBar from "@/components/tabl-bar"
import { Button, Popconfirm, Table, TablePaginationConfig, message } from "antd"
import Column from "antd/es/table/Column"
import { useEffect, useState } from "react"
import { USerDataSourceFace, PropsTypes } from "./type";
import AddShop from "./addUser"
import { cloneDeep } from "lodash";
import { getUserList,DellUser } from "@/api/user"
import "./index.scss"
import { initTime } from "@/utils";

interface type extends PropsTypes {

}
interface response {
    list: USerDataSourceFace[],
    total: number,
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let value = ""
let timer: any = null
const Shop: React.FC<type> = () => {
    const [upData, setUpdata] = useState<USerDataSourceFace>(
        {
            address: "",
            uuid: "",
            account: "",  // 账号
            nickName: "", // 昵称
            phone: "", // 联系方式
            sex: "", // 性别
            updateTime: "",  // 跟新时间
            shops: [] // 绑定店铺
        }
    )
    const [listData, setList] = useState<USerDataSourceFace[]>([])
    const [show, setShow] = useState(false)
    const [loading, setLoading] = useState(false)
    const [paginationData, setPaginationData] = useState<TablePaginationConfig>(
        {
            current: 1,
            defaultPageSize: 20,
            pageSizeOptions: [20, 40, 80, 120],
            total: 0,
            onChange: (page) => {
                paginationData.current = page
                find()
            },
            onShowSizeChange: (_, size) => {
                paginationData.defaultPageSize = size
                find()
            },
            showTotal: (t) => {
                return (
                    <div>共{t}条数据</div>
                )
            }
        }
    )

    const searchInput = (str: string) => {
        value = str
        find()
    }
    const changemodel = (v: boolean, loadList: boolean) => {
        setShow(v)
        if (loadList) {
            const p = cloneDeep(paginationData)
            p.current = 1
            setPaginationData(p)
            find()
        }
    }
    const changeModelShow = () => {
        setShow(true)
        setUpdata(
            {
                address: "",
                uuid: "",
                account: "",  // 账号
                nickName: "", // 昵称
                phone: "", // 联系方式
                sex: "", // 性别
                updateTime: "",  // 跟新时间
                shops: [] // 绑定店铺
            }
        )
    }
    const rightConterDom = () => {
        return (
            <Button type="primary" onClick={changeModelShow}>添加用户</Button>
        )
    }
    const tableOperate = (e: USerDataSourceFace) => {
        return (
            <div>
                <Button type="link" onClick={() => { changeDAta(e) }}>修改</Button>
                <Popconfirm
                    title="是否执行操作？"
                    description="删除后将无法恢复！"
                    onConfirm={() => dellITem(e)}
                    okText="是"
                    cancelText="否"
                >
                    <Button danger type="text">
                        删除
                    </Button>
                </Popconfirm>
            </div>

        )
    }
    const dellITem = (e: USerDataSourceFace) => {
        const uuid = e.uuid
        setLoading(true)
        DellUser({uuids:uuid}).then(()=>{
            message.success("删除成功")
            find()
        }).catch(()=>{
            message.error("删除失败")
        })

        console.log(e)
    }
    const changeDAta = (data: USerDataSourceFace) => {
        const d = cloneDeep(data) as any
        d.shops = d.shops.split(",")
        setUpdata(d)
        setShow(true)

    }
    const find = async () => {
        clearTimeout(timer)
        timer = setTimeout(async () => {
            const p = cloneDeep(paginationData)
            const params = {
                page: p.current,
                size: p.defaultPageSize,
                keywords: value,
            }
            setLoading(true)
            try {
                const res = await getUserList<response>(params)
                if (res) {
                    const { list, total } = res
                    list.map((e, index) => {
                        e.key = e.uuid
                        e.index = index + 1
                        return e
                    })
                    setList(list || [])
                    p.total = total || 0
                    setPaginationData(p)
                }
            } finally {
                setLoading(false)
            }
        }, 500);
    }
    useEffect(() => {
        value = ""
        find()
    }, [])

    return (
        <div>
            <TablBar changeValue={searchInput} rightConter={rightConterDom} />
            <AddShop show={show} changeShow={changemodel} upData={upData}></AddShop>
            <Table
                dataSource={listData}
                loading={loading}
                pagination={paginationData}
                scroll={{ y: "calc(100vh - 250px)" }}
                style={{ marginTop: "20px" }}
                size="large"
            >
                <Column title="序号" dataIndex="index" align="center" width={80} />
                <Column title="账号" dataIndex="account" align="center" />
                <Column title="账户昵称" dataIndex="nickName" align="center" />
                <Column title="地址" dataIndex="address" align="center" />
                <Column title="性别" dataIndex="sex" align="center" />
                <Column title="联系方式" dataIndex="phone" align="center" />
                <Column title="关联店铺数量" dataIndex="shops" align="center" width={120} render={(e)=>{
                    return (
                        <div>
                            {e? e.split(",").length: 0 }
                        </div>
                    )
                }} />
                <Column title="更新时间" dataIndex="updateTime" align="center" width={180} render={(e) => {
                    return (
                        <div>{initTime(e)}</div>
                    )
                }} />
                <Column title="操作" align="center" render={tableOperate} width={180} />
            </Table>

        </div>
    )
}
export default Shop